<template>
  <div class="order_warp">
    <div class="m-secondary-navigator">
            <span @click="tosy">首页</span>
            /
            <span @click="tocart">购物车</span>
            /
            <span @click="confirm">确认页</span>
            /
            <span class="ordery">订单</span>
        </div>
        <el-tabs type="border-card">
  <el-tab-pane label="待发货">
 <div v-if="!show0" class="noorder">
   <img src="/static/img/kongcart.c8984ab.png"/>
      <p>暂无相关订单</p>
    </div>
      <div class="merchant-info" v-if="show0">
                    <div v-for="(item,index1) in order" class="store-item clearfix" :key="index1">
 <div v-if="item.status==0">
    <p class="company">
    <span v-html="item.name" class="company_inner"></span>
  </p>

  <div v-for="( data,index) in item.list" class="goods-item" :key="index" >
   <ul class="clearfix">
      <li class="tupian">
        <img :src="data.c_img"/>
      </li>
      <li class="yangshi">
        <span class="name">{{data.c_name}}</span>
        <span class="style" v-for="(val1,ind1) in data.c_style" :key="ind1">{{val1}}
        </span>
      </li>
      <li class="jiaprice">
        ￥{{data.c_price}}
      </li>
      <li class="jinum">
        <span>{{data.c_num}}</span>
      </li>
      <li class="dantotal">
        <span>￥{{data.c_total}}</span>
      </li>
 
   </ul>
  </div>
  <p class="xinxi"><span>购买人：<i>{{item.o_name}}</i></span> <span>收货地址：<i>{{item.o_address}}</i></span> <span>付款时间：<i>{{item.o_data}}</i></span>
    <span>收货电话：<i>{{item.o_number}}</i></span></p>

 </div>
 </div>
            </div>
  </el-tab-pane>
  <el-tab-pane label="待收货">
    <div v-if="!show1"  class="noorder">
   <img src="/static/img/kongcart.c8984ab.png"/>
      <p>暂无相关订单</p>
    </div>
    <div class="merchant-info" v-if="show1">
                    <div v-for="(item,index1) in order" class="store-item clearfix" :key="index1">
 <div v-if="item.status==1">
    <p class="company">
    <span v-html="item.name" class="company_inner"></span>
  </p>

  <div v-for="( data,index) in item.list" class="goods-item" :key="index" >
   <ul class="clearfix">
      <li class="tupian">
        <img :src="data.c_img"/>
      </li>
      <li class="yangshi">
        <span class="name">{{data.c_name}}</span>
        <span class="style" v-for="(val1,ind1) in data.c_style" :key="ind1">{{val1}}
        </span>
      </li>
      <li class="jiaprice">
        ￥{{data.c_price}}
      </li>
      <li class="jinum">
        <span>{{data.c_num}}</span>
      </li>
      <li class="dantotal">
        <span>￥{{data.c_total}}</span>
      </li>
 
   </ul>
  </div>
  <p class="xinxi"><span>购买人：<i>{{item.o_name}}</i></span> <span>收货地址：<i>{{item.o_address}}</i></span> <span>付款时间：<i>{{item.o_data}}</i></span>
    <span>收货电话：<i>{{item.o_number}}</i></span></p>
    <p class="shouhuo" @click="shouhuo(item)">点击收货</p>

 </div>
 </div>
            </div>
            </el-tab-pane>
  <el-tab-pane label="待评价">
     <div v-if="!show2"  class="noorder">
   <img src="/static/img/kongcart.c8984ab.png"/>
      <p>暂无相关订单</p>
    </div>
    <div class="merchant-info" v-if="show2">
                    <div v-for="(item,index1) in order" class="store-item clearfix" :key="index1">
 <div v-if="item.status==2">
    <p class="company">
    <span v-html="item.name" class="company_inner"></span>
  </p>

  <div v-for="( data,index) in item.list" class="goods-item" :key="index" >
   <ul class="clearfix">
      <li class="tupian">
        <img :src="data.c_img"/>
      </li>
      <li class="yangshi">
        <span class="name">{{data.c_name}}</span>
        <span class="style" v-for="(val1,ind1) in data.c_style" :key="ind1">{{val1}}
        </span>
      </li>
      <li class="jiaprice">
        ￥{{data.c_price}}
      </li>
      <li class="jinum">
        <span>{{data.c_num}}</span>
      </li>
      <li class="dantotal">
        <span>￥{{data.c_total}}</span>
      </li>
 
   </ul>
  </div>
  <p class="xinxi"><span>购买人：<i>{{item.o_name}}</i></span> <span>收货地址：<i>{{item.o_address}}</i></span> <span>付款时间：<i>{{item.o_data}}</i></span>
    <span>收货电话：<i>{{item.o_number}}</i></span></p>
    <div v-for="( data1,index2) in item.list" :key="index2+10">
    <p class="shouhuo" @click="pingjia(data1.p_id,item)" v-if="index2==0">点击评价</p>
    </div>

 </div>
 </div>
            </div>
  </el-tab-pane>
  <el-tab-pane label="全部订单 ">
    <div v-if="!show" class="noorder">
   <img src="/static/img/kongcart.c8984ab.png"/>
    <p>暂无相关订单</p>
    </div>
         <div class="merchant-info" v-if="show">
                    <div v-for="(item,index1) in order" class="store-item clearfix" :key="index1">
  <p class="company">
    <span v-html="item.name" class="company_inner"></span>
  </p>

  <div v-for="( data,index) in item.list" class="goods-item" :key="index" >
   <ul class="clearfix">
      <li class="tupian">
        <img :src="data.c_img"/>
      </li>
      <li class="yangshi">
        <span class="name">{{data.c_name}}</span>
        <span class="style" v-for="(val1,ind1) in data.c_style" :key="ind1">{{val1}}
        </span>
      </li>
      <li class="jiaprice">
        ￥{{data.c_price}}
      </li>
      <li class="jinum">
        <span>{{data.c_num}}</span>
      </li>
      <li class="dantotal">
        <span>￥{{data.c_total}}</span>
      </li>
 
   </ul>
  </div>
  <p class="xinxi"><span>购买人：<i>{{item.o_name}}</i></span> <span>收货地址：<i>{{item.o_address}}</i></span> <span>付款时间：<i>{{item.o_data}}</i></span>
  <span>收货电话：<i>{{item.o_number}}</i></span>
  </p>
</div>
            </div>
  </el-tab-pane>
</el-tabs>
  </div>
</template>

<script>
export default {
   inject:['reload'],
  data () {
    return {
      order:[],
      status0:0,
      status1:0,
      status2:0,
      show0:false,
      show1:false,
      show2:false,
      show:false,
      res:"",
    }
  },
  created () {
     this.$axios.post("http://127.0.0.1:8081/client/getorder",
     {u_id:sessionStorage.getItem("userid")}).then(res=>
     {
     
       if(res.data.status==1)
       {
         this.show=true;
         this.res=res.data.result;
         var val=res.data.result;
      //  console.log(val)
      //  this.order=JSON.parse(val[0].o_content);
       for(let i=0;i<val.length;i++)
       {
           let vals=JSON.parse(val[i].o_content);
           console.log("vals",vals)
         for(let j=0;j<vals.length;j++)
         {
            vals[j].o_name=val[i].o_name;
           vals[j].o_address=val[i].o_address;
           vals[j].o_number=val[i].o_number;
           vals[j].o_data=this.datas(val[i].o_data);
           vals[j].o_id=val[i].o_id;
           this.order.push(vals[j]);
           console.log("vals.status",vals[j].status)
           if(vals[j].status==0)
           {
             this.status0++;
           }
           else if(vals[j].status==1){
             this.status1++;
           }
           else if(vals[j].status==2)
           {
             this.status2++;
           }
         } 
        
       }
      //  console.log("status0",this.status0)
      //  console.log("status1",this.status1)
       console.log("status2",this.status2)
      //  console.log("order",this.order);
       }
       else{
          this.show=false;
       }
       if(this.status0==0)
      {
        this.show0=false;
      }
      else{
        this.show0=true;
      }
      if(this.status1==0)
      {
        this.show1=false;
      }
      else{
        this.show1=true;
      }
      if(this.status2==0)
      {
        this.show2=false;
      }
      else{
        this.show2=true;
      }

     })
      


  },
  methods: {
     tosy()
        {
            this.$router.push("/");
        },
        tocart()
        {
            this.$router.push("/cart");
        },
        confirm()
        {
          this.$router.psuh("/settlement")
        },
         calEveryStore : function(index) {
      var everyStoreMoney = 0,
        list = this.order[index]['list'];
      list.forEach(function(item, index, arr) {
        // if ( list[index]['checked'] ) { 
          everyStoreMoney += parseFloat(item.c_price) * parseFloat(item.c_num);
        // }
      });
      return everyStoreMoney;
    },
    shouhuo(item)
    {
      // console.log(item);
      // console.log(this.res);
     
      console.log(item.list.length)
       this.$confirm('您是否已收到货?', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          let o_id="";
     let o_content="";
      for(let i=0;i<this.res.length;i++)
      {
        console.log("content",this.res)
        if(this.res[i].o_id==item.o_id)
        {
          
          var zhi=JSON.parse(this.res[i].o_content)
        for(let j=0;j<zhi.length;j++)
        {
          if(item.random==zhi[j].random)
          {
            zhi[j].status=2;
          }
        }
        this.res[i].o_content=JSON.stringify(zhi);
        o_id=item.o_id;
        o_content=JSON.stringify(zhi);
        }
        console.log("content1",this.res)
        // console.log(JSON.parse(this.res[i].o_content))
      }
      this.$axios.post("http://127.0.0.1:8081/client/updateorder",{
        o_id:o_id,
        o_content:o_content

      }).then(res=>
      {
        console.log(res.data)
         this.$message({
            type: 'success',
            message: '收货成功!'
          });
           this.reload();
      })
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    pingjia(p_id,item)
    {
      console.log(p_id,item);
        this.$prompt('请输入评价内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
             if(value.length<5)
            {
               this.$message({
            type: 'info',
            message:"评论不能少于五个字"
          }); }
          else{
             let o_id="";
           let o_content="";
      for(let i=0;i<this.res.length;i++)
      {
        console.log("content",this.res)
        if(this.res[i].o_id==item.o_id)
        {
          
          var zhi=JSON.parse(this.res[i].o_content)
        for(let j=0;j<zhi.length;j++)
        {
          if(item.random==zhi[j].random)
          {
            zhi[j].status=3;
          }
        }
        this.res[i].o_content=JSON.stringify(zhi);
        o_id=item.o_id;
        o_content=JSON.stringify(zhi);
        }
        console.log("content1",this.res)
        // console.log(JSON.parse(this.res[i].o_content))
      }
      // let mm={
      //   o_id:o_id,
      //   o_content:o_content,
      //   u_id:sessionStorage.getItem("userid"),
      //   u_sex:sessionStorage.getItem("usersex"),
      //   u_name:sessionStorage.getItem("username"),
      //   data:(new Date()).getTime(),
      //   spl_content:value
      //   }
      //   console.log(mm)
      
      this.$axios.post("http://127.0.0.1:8081/client/commentorder",{
        o_id:o_id,
        o_content:o_content,
        u_id:sessionStorage.getItem("userid"),
        u_sex:sessionStorage.getItem("usersex"),
        u_name:sessionStorage.getItem("username"),
        datass:(new Date()).getTime(),
        spl_content:value,
        p_id:p_id
      }).then(res=>
      {
          // console.log("res",res.data)
          this.$message({
            type: 'success',
            message: "评论成功"
          });
          this.reload();
      })
          
          }
           
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    datas(time)
    {
      // console.log(time)
      var date = new Date(parseInt(time) + 8 * 3600 * 1000); // 增加8小时
      // console.log(date.toJSON())
    return date.toJSON().substr(0, 19).replace('T', ' ');
    }
  }

}
</script>

<style>
.order_warp{
  width: 1080px;
  margin:0 auto;
}
.m-secondary-navigator{
    padding: 20px 0;
    width: 100%;
    display: block;
    float: none;
    background: transparent repeat 0 0 none;
    font-size: 14px;
}
.ordery{
    color: #c00000;
}
.el-tabs__item{
  /* flex:1; */
  padding: 0 111px !important;
}
/* .el-tabs__nav .is-top{
  width: 100%
} */
.company_inner{
  margin-left: 20px;
}
.company{
  padding-top: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e7e7;
  font-size: 14px;
  color: #666;
}
.goods-item ul{
  border-bottom: 1px solid #e7e7e7
}
.goods-item li{
  float: left;
  height: 72px;
  line-height: 72px;
  padding: 35px 0;
  text-align: center;
}
.goods-item .tupian{
  width: 120px;
  margin-left:10px;
  padding-top: 10px ;
}
/* .goods-item .tupian{
  height: 107px;
  padding: 0
} */
.tupian img{
  display: block;
  width: 100%;
}
.goods-item .yangshi{
  width: 320px;
  padding-left:20px;
  height: 142px;
  box-sizing: border-box;
  font-size: 14px;
  color: #666;
}
.goods-item .jiaprice{
  width: 210px;
}
.goods-item .jinum{
  width: 205px;
  position: relative;
  text-align: center
}

.clearfix::after{
  content: "";
  clear: both;
  overflow: hidden;
  height: 0;
  display: block;
}
.xinxi{
  line-height: 80px;
  margin-left: 20px;
  text-align: center;
}
.xinxi i{
  color: #c00000;
}
.shouhuo{
  float: right;
  width: 100px;
  font-size: 16px;
  color: #c00000;
  line-height: 40px;
  border: 1px #eee solid;
  margin-right: 20px;
  text-align: center;
   cursor:pointer
}
.shouhuo:hover{
  background: #eee;
  /* color: #fff; */
  /* border-color: #c00000; */
}
/* .el-tabs__content{
  height: 100%;
} */
/* .el-tabs .el-tabs--top .el-tabs--border-card{
  height: 100%;
} */
.noorder{
  width: 100%;
  text-align: center
  /* background: url('/static/img/kongcart.c8984ab.png') no-repeat; */
}
.noorder img{
  margin-top: 100px;
  width: 100px;
}
.noorder p{
  color: #c00000;
  line-height: 80px;
}
</style>
